<template>
  <!-- 查询条件 耳号 品种 性别 -->
  <el-form :model="form" label-width="auto" :inline="true">
    <!-- 羊只耳号 -->
    <el-form-item label="羊只耳号：">
      <el-input v-model="form.auricle" />
    </el-form-item>
    <!-- 下拉框 品种 -->
    <el-form-item label="品种：" style="width: 260px">
      <el-select v-model="form.sheepvarietyId" placeholder="请选择品种">
        <el-option
          v-for="item in sheepvarietyList"
          :label="item.sheepvarietyName"
          :value="item.sheepvarietyId"
        />
      </el-select>
    </el-form-item>
    <!-- 下拉框 性别 -->
    <el-form-item label="性别：" style="width: 260px">
      <el-select v-model="form.sheepSex" placeholder="请选择性别">
        <el-option label="公" value="1" />
        <el-option label="母" value="2" />
      </el-select>
    </el-form-item>

    <!-- 按钮 查询 新增 重置 -->
    <el-form-item>
      <el-button type="danger" @click="getBodyList">查询</el-button>
      <el-button>重置</el-button>
      <el-button type="danger" @click="postAll">新增</el-button>
    </el-form-item>
  </el-form>

  <!-- 显示数据 -->
  <el-table :data="bodyList" style="width: 100%" @selection-change="checkAll">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="bodyId" label="序号" />
    <el-table-column prop="auricle" label="耳号" />
    <el-table-column prop="sheepvarietyName" label="品种" />
    <!-- Tag标签 性别 -->
    <el-table-column prop="sheepSex" label="性别">
      <template v-slot="scope">
        <el-tag type="primary" v-if="scope.row.sheepSex == 1">公</el-tag>
        <el-tag type="danger" v-else>母</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="buildingName" label="测定栋舍" />
    <el-table-column prop="columnsName" label="测定栏位" />
    <el-table-column prop="bodyDate" label="测定日期">
      <template v-slot="scope">
        {{ scope.row.bodyDate.substring(0, 10) }}
      </template>
    </el-table-column>
    <el-table-column label="测定日龄">
      <template v-slot="scope">
        {{
          Math.ceil(
            (new Date(time2).getTime() -
              new Date(scope.row.bodyDate).getTime()) /
              (1000*60*60*24)
          )
        }}
      </template>
    </el-table-column>
    <el-table-column prop="bodyHeight" label="身高(cm)" />
    <el-table-column prop="bodyLong" label="体长(cm)" />
    <el-table-column prop="bodyShort" label="胸围(cm)" />
    <el-table-column prop="bodyPipe" label="管围(cm)" />
    <el-table-column prop="bodyScrotal" label="阴囊围(cm)" />
    <el-table-column prop="bodyBackfat" label="背膘厚度(mm)" />
    <el-table-column prop="bodyEye" label="眼肌面积(c㎡)" />
    <el-table-column prop="bodyEyeWeight" label="眼肌宽度(cm)" />
    <!-- <el-table-column prop="date" label="创建人" />
    <el-table-column prop="name" label="创建时间" />
    <el-table-column prop="name" label="修改时间" /> -->
  </el-table>

  <!-- 分页 -->
  <table>
    <tr>
      <!-- 1. -->
      <td>
        <el-pagination
          v-model:current-page="form.pageIndex"
          v-model:page-size="form.pageSize"
          :page-sizes="[1, 3, 6, 9]"
          :size="form.pageSize"
          :background="true"
          layout="total,slot, sizes"
          :total="form.totalCount"
          prev-text="上一页"
          next-text="下一页"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          数据，每页显示{{ form.pageSize }}条数据，当前第1/{{
            form.pageIndex
          }}页，共{{ form.pageCount }}页。
        </el-pagination>
      </td>
      <!-- 2. -->
      <td>
        <el-pagination
          v-model:current-page="form.pageIndex"
          v-model:page-size="form.pageSize"
          :page-sizes="[1, 3, 6, 9]"
          :size="form.pageSize"
          :background="true"
          layout="slot,prev, pager"
          :total="form.totalCount"
          prev-text="上一页"
          next-text="下一页"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          <el-button @click="handleCurrentChange(1)">首页</el-button>
        </el-pagination>
      </td>
      <!-- 3. -->
      <td>
        <el-pagination
          v-model:current-page="form.pageIndex"
          v-model:page-size="form.pageSize"
          :page-sizes="[1, 3, 6, 9]"
          :size="form.pageSize"
          :background="true"
          layout="next,slot, jumper"
          :total="form.totalCount"
          prev-text="上一页"
          next-text="下一页"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          <el-button @click="handleCurrentChange(form.pageCount)"
            >尾页</el-button
          >
        </el-pagination>
      </td>
    </tr>
  </table>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import axios from "axios";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
//生命周期 钩子函数
onMounted(() => {
  getBodyList(); //体尺测试-显示
  postSheepvarietyBind(); //下拉框 品种
});

const time2 = new Date();

//定义变量
const form = reactive({
  auricle: "",
  sheepvarietyId: "",
  sheepSex: "",
  //分页
  pageIndex: 1,
  pageSize: 2,
  totalCount: 0,
  pageCount: 0,
});

//全选反选
const checked = ref([]);
const checkAll = (val: any) => {
  checked.value = val;
};

//体尺测试-显示
const bodyList = ref([]);
const getBodyList = () => {
  axios
    .post("http://localhost:5012/api/Breedings/BodyLists", {
      auricle: form.auricle,
      sheepvarietyId: form.sheepvarietyId || 0,
      sheepSex: form.sheepSex || 0,

      pageSize: form.pageSize,
      pageIndex: form.pageIndex,
    })
    .then((res) => {
      console.log(res.data.data);
      bodyList.value = res.data.data.data;
      form.pageCount = res.data.data.pageCount;
      form.totalCount = res.data.data.totalCount;
    })
    .catch((err) => {
      console.log(err);
    });
};
//分页
const handleSizeChange = (val: number) => {
  form.pageSize = val;
  getBodyList();
};
const handleCurrentChange = (val: number) => {
  form.pgaeIndex = val;
  getBodyList();
};

//新增跳转 体尺测定
const postAll = () => {
  location.href = "BodyAdd";
};

//下拉框 品种
const sheepvarietyList = ref([]);
const postSheepvarietyBind = () => {
  axios
    .post("http://localhost:5012/api/Breedings/SheepvarietyBind", {})
    .then((res) => {
      console.log(res);
      sheepvarietyList.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>
